<template>
	<div id="singleMeets">
		<el-card shadow="always" class="box-card" v-loading="loading">
			<el-form :inline="true" :model="queryForm" class="demo-form-inline">
				<el-form-item label="所属项目">
					<el-input v-model="queryForm.projectName" placeholder="项目名称关键字查找"></el-input>
					<!--          <el-select v-model="queryForm.projectId" >-->
					<!--            <el-option v-for="item in projectList"-->
					<!--                       :key="item.id"  :label="item.projectName"-->
					<!--                       :value="item.id">-->
					<!--            </el-option>-->
					<!--          </el-select>-->
				</el-form-item>
				<el-form-item label="结算单名称">
					<el-input v-model="queryForm.orderName" placeholder="结算单名称关键字查找"></el-input>
				</el-form-item>
				<!--        <el-form-item label="会议时间">-->
				<!--          <el-date-picker-->
				<!--              v-model="queryForm.projectTimeRange"-->
				<!--              type="daterange"-->
				<!--              format="yyyy-MM-dd"-->
				<!--              value-format="yyyy-MM-dd"-->
				<!--              range-separator="至"-->
				<!--              start-placeholder="开始日期"-->
				<!--              end-placeholder="结束日期">-->
				<!--          </el-date-picker>-->
				<!--        </el-form-item>-->
				<el-form-item label="状态">
					<el-select style="width: 140px" v-model="queryForm.status">
						<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSearch">查询</el-button>
					<el-button type="info" @click="reSet" icon="el-icon-search">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<!-- 项目列表 -->
		<el-card shadow="always" class="table-card">
			<el-table :data="dataList" border style="width: 100%">
				<el-table-column align="center" prop="id" label="编号" width="80"></el-table-column>
        <el-table-column align="center" prop="reimbursementNum" label="金蝶费用报销单号" width="180"></el-table-column>
				<el-table-column align="center" prop="orderName" label="名称" min-width="180"></el-table-column>
				<el-table-column align="center" prop="applyMoney" label="收款金额(元)" width="110"></el-table-column>
				<el-table-column align="center" prop="createTime" label="发起时间" width="180">
					<template slot-scope="scope">
						{{ $moment(scope.row.createTime).format('L') }}
						{{ $moment(scope.row.createTime).format('LT') }}
					</template></el-table-column>
				<el-table-column align="center" prop="type" label="类型" :formatter="formatType"
					width="180"></el-table-column>
				<el-table-column align="center" prop="type" label="收费方式" width="180">
					<template v-slot:default="scope">
						{{collectWayEnums[scope.row.collectWay]}}
					</template></el-table-column>
				<el-table-column prop="projectName" align="center" label="所属项目" min-width="180"></el-table-column>
				<!-- <el-table-column prop="meetingName" align="center" label="所属会议"> </el-table-column> -->
				<el-table-column align="center" prop="status" label="状态" width="120">
					<template v-slot:default="scope">
						<span v-if="scope.row.status =='OFFICIAL_EXAMINE'">待审核</span>
						<span v-else-if=" scope.row.status=='SUCCESS'">财务审核成功</span>
						<span v-else-if=" scope.row.status=='SUBMIT'">官员审核成功</span>
						<span v-else-if=" scope.row.status=='AI_REVIEW_SUCCESS'">系统预审中</span>
						<div v-else-if="scope.row.status=='ERROR'">
							<span style="margin-right: 2px">被驳回</span>
							<el-tooltip effect="dark" trigger="hover" placement="right-start"
								:content="scope.row.errorMessage">
								<el-icon class="el-icon-warning-outline">
									<span>{{ scope.row.errorMessage }}</span></el-icon>
							</el-tooltip>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="updateTime" label="操作时间" width="180">
					<template slot-scope="scope">
						{{ $moment(scope.row.updateTime).format('L') }}
						{{ $moment(scope.row.updateTime).format('LT') }}
					</template>
				</el-table-column>

				<el-table-column label="操作" width="100" align="center" fixed="right">
					<template slot-scope="scope">
						<el-button size="mini" type="text"
							@click="toDetails(scope.row)">{{scope.row.stauts=='OFFICIAL_EXAMINE'?'审核':'查看'}}</el-button>
					</template>
				</el-table-column>
			</el-table>


			<div class="pagination" style="margin-top: 10px">
				<TablePaging :currentPage="queryForm.current" :total="queryForm.total" :pageSize="queryForm.size"
					@pageChange="handleCurrentChange" />
			</div>
		</el-card>
	</div>
</template>

<script>
	import {
		getSpendingOrderListByPage
	} from '@/request/api.js';
	import TablePaging from '@/components/TablePaging.vue';

	export default {
		name: 'index',
		components: {
			TablePaging
		},
		data() {
			return {
				collectWayEnums: {
					"0": "一次性收款并结项",
					"1": "首次收款",
					"2": "阶段收款",
					"3": "尾款",
					"4": "据实结算",
				},
				queryForm: {
					current: 1,
					size: 10,
					total: 0,
					status: "ALL",
					// orderName:"",
					projectTimeRange: []
					// projectType: 'single'
				},
				dataList: [],

				statusList: [{
						label: '全部',
						value: 'ALL'
					},
					{
						label: '待审核',
						value: 'OFFICIAL_EXAMINE'
					},
					{
						label: '官员审核成功',
						value: 'SUBMIT'
					},
					{
						label: '财务审核成功',
						value: 'SUCCESS'
					},
					{
						label: '被驳回',
						value: 'ERROR'
					},
				],

				loading: false,
				projectList: [],
			}
		},

		mounted() {
			this.loadData();
		},
		methods: {

			toDetails(item) {
				//供应商结算
				//   this.$router.push({
				//     name: 'settlementAudit',
				//     query: {
				//       orderId: item.id,
				//       // pId:item.projectId,
				//       // mId:item.meetingId,
				//       // collectWay:item.collectWay,
				//       // feeType:item.feeType,
				//     }
				//   })

				this.$router.push({
					name: 'fileListPreviewnew',
					query: {
						orderId: item.id
					}
				});



				// if(item.type=="DOCTOR"){
				//   //劳务结算
				//   this.$router.push({
				//     name: 'uploadFile',
				//     query: {
				//       mId: item.id,
				//       // status: item.meetingStatus,
				//       // now: '4'
				//     }
				//   })
				// }else {
				//   this.supplierSettlement(item)
				// }

			},

			// // 供应商结算
			// supplierSettlement(item) {
			//   this.ckMeetingId = item.id;
			//   this.loading = true;
			//   this.getCollectWayFun(item);
			//
			//   getOrderByMeetId({
			//     meetingId: item.id,
			//   }).then(res => {
			//     this.orderData = res.data;
			//     if (this.orderData) {
			//       this.loading = false;
			//       this.toSupplierSettlement()
			//       console.log('有记录')
			//     } else {
			//       this.loading = false;
			//       this.settleAccountsShow = true;
			//       console.log('无记录')
			//     }
			//   })
			// },


			onSearch() {
				this.queryForm.current = 1;
				this.loadData()
			},


			// formatStatus(row, column, cellValue) {
			//   console.log(cellValue)
			//   const statusMap = {
			//     'CREATED': '本地保存',
			//     'AI_REVIEW': '预审中',
			//     'AI_REVIEW_SUCCESS': '预审成功',
			//     'WAIT': '待提交',
			//     'SUBMIT': '已提交',
			//     'SUCCESS': '审核成功',
			//     'FINISH': '已完成',
			//     'ERROR': '被驳回',
			//     'OFFICIAL_EXAMINE': '待审核'
			//   };
			//   return statusMap[cellValue] || '未知状态';
			// },

			formatType(row, column, cellValue) {
				// const statusMap = {
				//   'DOCTOR': '劳务发放',
				//   'OTHER': '项目回款'
				// };
				// return statusMap[cellValue] || '未知状态';
				//后端没返回 医生供应商没合并默认全部项目汇款
				return '项目回款';
			},

			reSet() {
				this.queryForm = {
					current: 1,
					size: 10,
					total: 0,
					status: "ALL"
				}
				this.loadData()
			},
			handleSizeChange(val) {
				this.queryForm.size = val;
				this.loadData()
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.queryForm.current = val;
				this.loadData()
				console.log(`当前页: ${val}`);
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				console.log(row.projectStatus)
				if (row.projectStatus === 'UNDERWAY') { //进行中
					return 'warning-row';
				} else if (row.projectStatus === 'TIMEOUT') { //已结束
					return 'end-row';
				} else if (row.projectStatus === 'WAIT_CLAIM') { //待认领
					return 'warning-row';
				}
				return '';
			},



			// 获取table数据列表
			loadData() {
				const params = {
					...this.queryForm
				};
				if (params.status == 'ALL') {
					delete params.status;
				}
				console.log("执行")
				getSpendingOrderListByPage(params).then(res => {
					if (res.code == 200) {
						this.dataList = res.data.records;
						this.queryForm.total = res.data.total
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.el-table .warning-row {
		background: oldlace;
	}

	//.el-table .end-row{
	//  background: #d3d4d6;
	//}
	.el-table .success-row {
		background: #f0f9eb;
	}

	#singleMeets {
		//display: flex;
		//height: auto;
		//flex-direction: column;

		.box-card {
			// margin: 20px 20px 0;
			padding: 20px 20px 0;
			// border-radius: 10px;
		}

		.table-card {
			// margin: 20px 20px 0;
			//padding: 20px 20px 0;
			// border-radius: 10px;
		}

	}
</style>